diff options
Diffstat (limited to 'src/app/profile/[username]')
| -rw-r--r-- | src/app/profile/[username]/page.tsx | 83 |
1 files changed, 83 insertions, 0 deletions
diff --git a/src/app/profile/[username]/page.tsx b/src/app/profile/[username]/page.tsx new file mode 100644 index 0000000..cad11bb --- /dev/null +++ b/src/app/profile/[username]/page.tsx @@ -0,0 +1,83 @@ +import Image from 'next/image'; +import { Button } from '@/components/ui'; +import { getUserByUsername } from '@/lib/api/user'; +import { User } from '@/lib/contexts/Auth.context'; +interface ProfilePageProps { + params: Promise<{ username: string }>; +} + +export default async function Profile({ params }: ProfilePageProps) { + const { username } = await params; + + const profileUser: User = await getUserByUsername(username); + const icons = [ + 'facebook', + 'pinterest', + 'discord', + 'artstation', + 'behance', + 'instagram', + ] as const; + + type IconKey = (typeof icons)[number]; + return ( + <> + <div className="flex gap-[20px] flex-col"> + <div className="flex flex-col flex-start padding-0 gap-[20px] h-[551px] w-full"> + <div className="gradient-0 flex flex-end padding-[20px] gap-[10px] h-[350px] w-full rounded-[20px]"></div> + <div className="flex flex-col flex-start gap-[10px] w-full h-[181px]"> + <div className="flex flex-col gap-1.25"> + <p className="font-medium text-[24px]"> + {profileUser.username} + </p> + </div> + <div className="flex flex-row items-center gap-1.25 h-[19px]"> + <p> + {profileUser.profile?.publications_count ?? 0}{' '} + публикаций + </p> + <p> + {profileUser.profile?.collections_count ?? 0}{' '} + коллекций + </p> + <p> + {profileUser.profile?.followers_count ?? 0}{' '} + подписчиков + </p> + <p> + {profileUser.profile?.following_count ?? 0}{' '} + подписок + </p> + </div> + <div className="flex max-w-[800px] font-regular text-[12px] gap-1.25"> + <p>{profileUser.description}</p> + </div> + <div className="flex flex-row flex-end gap-1.25"> + {icons + .filter( + (icon: IconKey) => + profileUser.integrations?.[icon], + ) + .map((icon: IconKey) => ( + <a + key={icon} + href={profileUser.integrations![icon]!} + target="_blank" + rel="noopener noreferrer" + > + <img + src={`/profile/${icon}.svg`} + alt={icon} + className="w-[30px] h-[40px]" + /> + </a> + ))}{' '} + </div> + </div> + </div> + <div className="flex flex-row space-between flex-start gap-1.25 w-full h-[42px]"></div> + <Button>Управление аккаунтом</Button> + </div> + </> + ); +} |
